<template>
  <div>
    <el-form class="demo-form-inline" :inline="true">
      <el-button style="float: right;" type="primary" @click="deleteElec">批量删除</el-button>
    </el-form>
    <elec-table :list="list" @handleSelectionChange="handleSelectionChange" />
    <el-pagination
      class="paginationstyle"
      :current-page="pageData.pageIndex"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="smsElectricianTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import elecTable from '../table'
import { mapGetters } from 'vuex'
export default {
  components: { elecTable },
  data() {
    return {
      tablebtn: 'mini',
      listLoading: false,
      selection: [],
      pageData: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  computed: {
    ...mapGetters([
      'smsElectricianList',
      'smsElectricianTotal'
    ]),
    list: function() {
      const start = (this.pageData.pageIndex - 1) * this.pageData.pageSize
      const end = this.pageData.pageIndex * this.pageData.pageSize
      const list = this.smsElectricianList.slice(start, end)
      return list
    }
  },
  methods: {
    // 批量删除
    deleteElec() {
      if (this.selection.length === 0) {
        this.$message({
          type: 'error',
          message: '至少选择一条数据'
        })
        return
      }
      this.$store.dispatch('sms/delSmsElectricianList', this.selection)
    },
    // 修改每页条数
    handleSizeChange(pageSize) {
      this.pageData = {
        pageSize,
        pageIndex: 1
      }
    },
    // 修改页数
    handleCurrentChange(pageIndex) {
      this.pageData = {
        ...this.pageData,
        pageIndex
      }
    },
    // 多选
    handleSelectionChange(arr) {
      this.selection = arr
    }
  }
}
</script>
